<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
<title>第34章 项目1-博客前端：年月日</title>
<script type="text/javascript" src="../tool.js"></script>
<script type="text/javascript" src="../base.js"></script>
<script type="text/javascript" src="../base_drag.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>

<div id="header">
	<div class="logo"><img src="images/logo.gif" alt="" /></div>
	<div class="member">个人中心
		<ul class="member_ul">
			<li><a href="###">设置</a></li>
			<li><a href="###">换肤</a></li>
			<li><a href="###">帮助</a></li>
			<li><a href="###">退出</a></li>
		</ul>
	</div>
	<div class="reg">注册</div>
	<div class="login">登录</div>
</div>

<div id="reg">
	<h2><img src="images/close.png" alt="" class="close" />会员注册</h2>
	<form name="reg">
	<dl>
		<dd>用 户 名： <input type="text" name="user" class="text" />
			<span class="info info_user">请输入用户名，2~20位，由字母、数字和下划线组成！</span>
			<span class="error error_user">输入不合法，请重新输入！</span>
			<span class="succ succ_user">可用</span>
		</dd>
		<dd>密　　码： <input type="password" name="pass" class="text" />
			<span class="info info_pass">
				<p>安全级别：<strong class="s s1">■</strong><strong class="s s2">■</strong><strong class="s s3">■</strong> <strong class="s s4" style="font-weight:normal;"></strong></p>
				<p><strong class="q1" style="font-weight:normal;">○</strong> 6-20 个字符</p>
				<p><strong class="q2" style="font-weight:normal;">○</strong> 只能包含大小写字母、数字和非空格字符</p>
				<p><strong class="q3" style="font-weight:normal;">○</strong> 大、小写字母、数字、非空字符，2种以上</p>
			</span>
			<span class="error error_pass">输入不合法，请重新输入！</span>
			<span class="succ succ_pass">可用</span>
		</dd>
		<dd>密码确认： <input type="password" name="notpass" class="text" />
			<span class="info info_notpass">请再一次输入密码！</span>
			<span class="error error_notpass">密码不一致，请重新输入！</span>
			<span class="succ succ_notpass">可用</span>
		</dd>
		<dd><span style="vertical-align:-2px">提　　问：</span> <select name="ques">
									<option value="0">- - - - 请选择 - - - -</option>
									<option value="1">- - 您最喜欢吃的菜</option>
									<option value="2">- - 您的狗狗的名字</option>
									<option value="3">- - 您的出生地</option>
									<option value="4">- - 您最喜欢的明星</option>
								  </select></dd>
		<dd>回　　答： <input type="text" name="ans" class="text" />
			<span class="info info_ans">请输入回答，2~32位！</span>
			<span class="error error_ans">回答不合法，请重新输入！</span>
			<span class="succ succ_ans">可用</span>
		</dd>
		<dd>电子邮件： <input type="text" name="email" class="text" autocomplete="off" />
			<span class="info info_email">请输入电子邮件！</span>
			<span class="error error_email">邮件不合法，请重新输入！</span>
			<span class="succ succ_email">可用</span>
			<ul class="all_email">
				<li><span></span>@qq.com</li>				
				<li><span></span>@163.com</li>
				<li><span></span>@sohu.com</li>
				<li><span></span>@sina.com.cn</li>
				<li><span></span>@gmail.com</li>
			</ul>
		</dd>
		<dd class="birthday"><span style="vertical-align:-2px">生　　日：</span> <select name="year">
									<option value="0">- 年 -</option>
								  </select> -
								  <select name="month">
									<option value="0">- 月 -</option>
								  </select> -
								  <select name="day">
									<option value="0">- 日 -</option>
								  </select></dd>
		<dd style="height:105px;"><span style="vertical-align:85px">备　　注：</span> <textarea name="ps"></textarea></dd>			
		<dd style="padding:0 0 0 320px;">还可以输入200字</dd>		
		<dd style="padding:0 0 0 80px;"><input type="button" class="submit" /></dd>
	</dl>
	</form>
</div>

<div id="login">
	<h2><img src="images/close.png" alt="" class="close" />网站登录</h2>
	<div class="user">帐 号：<input type="text" name="user" class="text" /></div>
	<div class="pass">密 码：<input type="password" name="pass" class="text" /></div>
	<div class="button"><input type="button" class="submit" value="" /></div>
	<div class="other">注册新用户 | 忘记密码？</div>
</div>

<div id="nav">
	<ul class="about">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul class="black">
		<li>首页</li>
		<li>博文列表</li>
		<li>精彩相册</li>
		<li>动感音乐</li>
		<li>关于我</li>
	</ul>
	<div class="nav_bg">
		<ul class="white">
			<li>首页</li>
			<li>博文列表</li>
			<li>精彩相册</li>
			<li>动感音乐</li>
			<li>关于我</li>
		</ul>
	</div>	
</div>


<div id="main">
	<div id="sidebar">
		<h2>教育博文1</h2>
		<ul>
			<li><a href="###">靠自己95 后女生被16 所国外名校录取</a></li>
			<li><a href="###">00 后的成长烦恼：压力巨大成隐形杀手</a></li>
			<li><a href="###">一年自学MIT 的33 门课? 疯狂学习方法</a></li>
			<li><a href="###">申请赴美读研人数下降5% 7 年来首遇冷</a></li>
			<li><a href="###">西政“萌招聘”秀出辣椒与美女被赞</a></li>
		</ul>
		<h2>教育博文2</h2>
		<ul>
			<li><a href="###">靠自己95 后女生被16 所国外名校录取</a></li>
			<li><a href="###">00 后的成长烦恼：压力巨大成隐形杀手</a></li>
			<li><a href="###">一年自学MIT 的33 门课? 疯狂学习方法</a></li>
			<li><a href="###">申请赴美读研人数下降5% 7 年来首遇冷</a></li>
			<li><a href="###">西政“萌招聘”秀出辣椒与美女被赞</a></li>
		</ul>
		<h2>教育博文3</h2>
		<ul>
			<li><a href="###">靠自己95 后女生被16 所国外名校录取</a></li>
			<li><a href="###">00 后的成长烦恼：压力巨大成隐形杀手</a></li>
			<li><a href="###">一年自学MIT 的33 门课? 疯狂学习方法</a></li>
			<li><a href="###">申请赴美读研人数下降5% 7 年来首遇冷</a></li>
			<li><a href="###">西政“萌招聘”秀出辣椒与美女被赞</a></li>
		</ul>
	</div>
	<div id="index">
		index
	</div>
</div>

<div id="share">
	<h2>分享到</h2>
	<ul>
		<li><a href="###" class="a">一键分享</a></li>
		<li><a href="###" class="b">新浪微博</a></li>
		<li><a href="###" class="c">人人网</a></li>
		<li><a href="###" class="d">百度相册</a></li>
		<li><a href="###" class="e">腾讯朋友</a></li>
		<li><a href="###" class="f">豆瓣网</a></li>
		<li><a href="###" class="g">百度新首页</a></li>
		<li><a href="###" class="h">和讯微博</a></li>
		<li><a href="###" class="i">QQ 空间</a></li>
		<li><a href="###" class="j">百度搜藏</a></li>
		<li><a href="###" class="k">腾讯微博</a></li>
		<li><a href="###" class="l">开心网</a></li>
		<li><a href="###" class="m">百度贴吧</a></li>
		<li><a href="###" class="n">搜狐微博</a></li>
		<li><a href="###" class="o">QQ 好友</a></li>
		<li><a href="###" class="p">更多...</a></li>
	</ul>
	<div class="share_footer"><a href="###">百度分享</a><span></span></div>
</div>

<div id="screen"></div>

<div id="test" style="clear:both;"></div>


</body>
<script>
	
	

$(function () {

	//个人中心
	$('#header .member').hover(function () {
		$(this).css('background', 'url(images/arrow2.png) no-repeat 55px center');
		$('#header .member_ul').show().animate({
			t : 30,
			step : 10,
			mul : {
				o : 100,
				h : 120
			}
		});
	}, function () {
		$(this).css('background', 'url(images/arrow.png) no-repeat 55px center');
		$('#header .member_ul').animate({
			t : 30,
			step : 10,
			mul : {
				o : 0,
				h : 0
			},
			fn : function () {
				$('#header .member_ul').hide();
			}
		});
	});
	
	
	//遮罩画布
	var screen = $('#screen');
	
	//登录框
	var login = $('#login');
	login.center(350, 250).resize(function () {
		if (login.css('display') == 'block') {
			screen.lock();
		}
	});
	$('#header .login').click(function () {
		login.center(350, 250).css('display', 'block');
		screen.lock().animate({
			attr : 'o',
			target : 30,
			t : 30,
			step : 10
		});
	});
	$('#login .close').click(function () {
		login.css('display', 'none');
		//先执行渐变动画，动画完毕后再执行关闭unlock
		screen.animate({
			attr : 'o',
			target : 0,
			t : 30,
			step : 10,
			fn : function () {
				screen.unlock();
			}
		});
	});
	
	//注册框
	var reg = $('#reg');
	reg.center(600, 550).resize(function () {
		if (reg.css('display') == 'block') {
			screen.lock();
		}
	});
	$('#header .reg').click(function () {
		reg.center(600, 550).css('display', 'block');
		screen.lock().animate({
			attr : 'o',
			target : 30,
			t : 30,
			step : 10
		});
	});
	$('#reg .close').click(function () {
		reg.css('display', 'none');
		screen.animate({
			attr : 'o',
			target : 0,
			t : 30,
			step : 10,
			fn : function () {
				screen.unlock();
			}
		});
	});
	
	//拖拽
	login.drag($('#login h2').last());
	reg.drag($('#reg h2').last());
	
	//百度分享初始化位置
	$('#share').css('top', getScroll().top + (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2 + 'px');
	
	/*
	addEvent(window, 'scroll', function () {
		$('#share').animate({
			attr : 'y',
			target : getScroll().top + (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2
		});
	});
	*/
	
	$(window).bind('scroll', function () {
		$('#share').animate({
			attr : 'y',
			target : getScroll().top + (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2
		});
	});
	
	//百度分享收缩效果
	$('#share').hover(function () {
		$(this).animate({
			attr : 'x',
			target : 0
		});
	}, function () {
		$(this).animate({
			attr : 'x',
			target : -211
		});
	});
	
	//滑动导航
	$('#nav .about li').hover(function () {
		var target = $(this).first().offsetLeft;
		$('#nav .nav_bg').animate({
			attr : 'x',
			target : target + 20,
			t : 30,
			step : 10,
			fn : function () {
				$('#nav .white').animate({
					attr : 'x',
					target : -target
				});
			}
		});
	}, function () {
		$('#nav .nav_bg').animate({
			attr : 'x',
			target : 20,
			t : 30,
			step : 10,
			fn : function () {
				$('#nav .white').animate({
					attr : 'x',
					target : 0
				});
			}
		});
	});
	
	//左侧菜单
	$('#sidebar h2').toggle(function () {
		$(this).next().animate({
			mul : {
				h : 0,
				o : 0
			}
		});
	}, function () {
		$(this).next().animate({
			mul : {
				h : 150,
				o : 100
			}
		});
	});

	
	//表单验证
	
	//focus, blur
	//alert($('form').first().user.value);
	//$('form').form('user').value('bbb');
	
	$('form').form('user').bind('focus', function () {
		$('#reg .info_user').css('display', 'block');
		$('#reg .error_user').css('display', 'none');
		$('#reg .succ_user').css('display', 'none');
	}).bind('blur', function () {
		if (trim($(this).value()) == '') {
			$('#reg .info_user').css('display', 'none');
			$('#reg .error_user').css('display', 'none');
			$('#reg .succ_user').css('display', 'none');
		} else if (!/[\w]{2,20}/.test(trim($(this).value()))) {
			$('#reg .error_user').css('display', 'block');
			$('#reg .info_user').css('display', 'none');
			$('#reg .succ_user').css('display', 'none');
		} else {
			$('#reg .succ_user').css('display', 'block');
			$('#reg .error_user').css('display', 'none');
			$('#reg .info_user').css('display', 'none');
		}
	});
	
	
	//密码验证
	$('form').form('pass').bind('focus', function () {
		$('#reg .info_pass').css('display', 'block');
		$('#reg .error_pass').css('display', 'none');
		$('#reg .succ_pass').css('display', 'none');
	}).bind('blur', function () {
		if (trim($(this).value()) == '') {
			$('#reg .info_pass').css('display', 'none');
		} else {
			if (check_pass(this)) {
				$('#reg .info_pass').css('display', 'none');
				$('#reg .error_pass').css('display', 'none');
				$('#reg .succ_pass').css('display', 'block');
			} else {
				$('#reg .info_pass').css('display', 'none');
				$('#reg .error_pass').css('display', 'block');
				$('#reg .succ_pass').css('display', 'none');
			}
		}
	});
	
	//密码强度验证
	$('form').form('pass').bind('keyup', function () {
		check_pass(this);
	});
	
	//密码验证函数
	function check_pass(_this) {
		var value = trim($(_this).value());
		var value_length = value.length;
		var code_length = 0;
		var flag = false;
		
		//第一个必须条件的验证6-20位之间
		if (value_length >= 6 && value_length <= 20) {
			$('#reg .info_pass .q1').html('●').css('color', 'green');
		} else {
			$('#reg .info_pass .q1').html('○').css('color', '#666');
		}
		
		//第二个必须条件的验证，字母或数字或非空字符，任意一个即可
		if (value_length > 0 && !/\s/.test(value)) {
			$('#reg .info_pass .q2').html('●').css('color', 'green');
		} else {
			$('#reg .info_pass .q2').html('○').css('color', '#666');
		}
		
		//第三个必须条件的验证，大写字母，小写字母，数字，非空字符 任意两种混拼即可
		if (/[\d]/.test(value)) {
			code_length++;
		}
		
		if (/[a-z]/.test(value)) {
			code_length++;
		}
		
		if (/[A-Z]/.test(value)) {
			code_length++;
		}
		
		if (/[^\w]/.test(value)) {
			code_length++;
		}
		
		if (code_length >= 2) {
			$('#reg .info_pass .q3').html('●').css('color', 'green');
		} else {
			$('#reg .info_pass .q3').html('○').css('color', '#666');
		}
		
		//安全级别
		if (value_length >= 10 && code_length >= 3) {
			$('#reg .info_pass .s1').css('color', 'green');
			$('#reg .info_pass .s2').css('color', 'green');
			$('#reg .info_pass .s3').css('color', 'green');
			$('#reg .info_pass .s4').html('高').css('color', 'green');
		} else if (value_length >= 8 && code_length >= 2) {
			$('#reg .info_pass .s1').css('color', '#f60');
			$('#reg .info_pass .s2').css('color', '#f60');
			$('#reg .info_pass .s3').css('color', '#ccc');
			$('#reg .info_pass .s4').html('中').css('color', '#f60');
		} else if (value_length >= 1) {
			$('#reg .info_pass .s1').css('color', 'maroon');
			$('#reg .info_pass .s2').css('color', '#ccc');
			$('#reg .info_pass .s3').css('color', '#ccc');
			$('#reg .info_pass .s4').html('低').css('color', 'maroon');
		} else {
			$('#reg .info_pass .s1').css('color', '#ccc');
			$('#reg .info_pass .s2').css('color', '#ccc');
			$('#reg .info_pass .s3').css('color', '#ccc');
			$('#reg .info_pass .s4').html(' ');
		}	
		
		if (value_length >= 6 && value_length <= 20 && !/\s/.test(value) && code_length >= 2) flag = true;
		
		return flag;
	}
	
	
	//密码确认
	$('form').form('notpass').bind('focus', function () {
		$('#reg .info_notpass').css('display', 'block');
		$('#reg .error_notpass').css('display', 'none');
		$('#reg .succ_notpass').css('display', 'none');
	}).bind('blur', function () {
		if (trim($(this).value()) == '') {
			$('#reg .info_notpass').css('display', 'none');
		} else if (trim($(this).value()) == trim($('form').form('pass').value())){
			$('#reg .info_notpass').css('display', 'none');
			$('#reg .error_notpass').css('display', 'none');
			$('#reg .succ_notpass').css('display', 'block');
		} else {
			$('#reg .info_notpass').css('display', 'none');
			$('#reg .error_notpass').css('display', 'block');
			$('#reg .succ_notpass').css('display', 'none');
		}
	});
	
	//回答
	$('form').form('ans').bind('focus', function () {
		$('#reg .info_ans').css('display', 'block');
		$('#reg .error_ans').css('display', 'none');
		$('#reg .succ_ans').css('display', 'none');
	}).bind('blur', function () {
		if (trim($(this).value()) == '') {
			$('#reg .info_ans').css('display', 'none');
		} else if (trim($(this).value()).length >= 2 && trim($(this).value()).length <= 32) {
			$('#reg .info_ans').css('display', 'none');
			$('#reg .error_ans').css('display', 'none');
			$('#reg .succ_ans').css('display', 'block');
		} else {
			$('#reg .info_ans').css('display', 'none');
			$('#reg .error_ans').css('display', 'block');
			$('#reg .succ_ans').css('display', 'none');
		}
	});
	
	//电子邮件
	$('form').form('email').bind('focus', function () {
	
		//补全界面
		if ($(this).value().indexOf('@') == -1) $('#reg .all_email').css('display', 'block');
	
		$('#reg .info_email').css('display', 'block');
		$('#reg .error_email').css('display', 'none');
		$('#reg .succ_email').css('display', 'none');
	}).bind('blur', function () {
	
		//补全界面
		$('#reg .all_email').css('display', 'none');
	
		if (trim($(this).value()) == '') {
			$('#reg .info_email').css('display', 'none');
		} else if (/^[\w\-\.]+@[\w\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(trim($(this).value()))) {
			$('#reg .info_email').css('display', 'none');
			$('#reg .error_email').css('display', 'none');
			$('#reg .succ_email').css('display', 'block');
		} else {
			$('#reg .info_email').css('display', 'none');
			$('#reg .error_email').css('display', 'block');
			$('#reg .succ_email').css('display', 'none');
		}
	});
	
	
	//电子邮件补全系统键入
	$('form').form('email').bind('keyup', function (event) {
		if ($(this).value().indexOf('@') == -1) {
			$('#reg .all_email').css('display', 'block');
			$('#reg .all_email li span').html($(this).value());
		} else {
			$('#reg .all_email').css('display', 'none');
		}
		
		$('#reg .all_email li').css('background', 'none');
		$('#reg .all_email li').css('color', '#666');
		
		if (event.keyCode == 40) {
			if (this.index == undefined || this.index >= $('#reg .all_email li').length() - 1) {
				this.index = 0;
			} else {
				this.index++;
			}
			$('#reg .all_email li').eq(this.index).css('background', '#e5edf2');
			$('#reg .all_email li').eq(this.index).css('color', '#369');
		}
		
		if (event.keyCode == 38) {
			if (this.index == undefined || this.index <= 0) {
				this.index = $('#reg .all_email li').length() - 1;
			} else {
				this.index--;
			}
			$('#reg .all_email li').eq(this.index).css('background', '#e5edf2');
			$('#reg .all_email li').eq(this.index).css('color', '#369');
		}
		
		
		if (event.keyCode == 13) {
			$(this).value($('#reg .all_email li').eq(this.index).text());
			$('#reg .all_email').css('display', 'none');
			this.index = undefined;
		}
		
	});
	
	//电子邮件补全系统点击获取
	$('#reg .all_email li').bind('mousedown', function () {
		$('form').form('email').value($(this).text());
	});
	
	//电子邮件补全系统鼠标移入移出效果
	$('#reg .all_email li').hover(function () {
		$(this).css('background', '#e5edf2');
		$(this).css('color', '#369');
	}, function () {
		$(this).css('background', 'none');
		$(this).css('color', '#666');
	});
	
	
	//年月日
	var year = $('form').form('year');
	var month = $('form').form('month');
	var day = $('form').form('day');
	
	var day30 = [4, 6, 9, 11];
	var day31 = [1, 3, 5, 7, 8, 10, 12];
	
	//注入年
	for (var i = 1950; i <= 2019; i ++) {
		year.first().add(new Option(i, i), undefined);
	}
	
	//注入月
	for (var i = 1; i <= 12; i ++) {
		month.first().add(new Option(i, i), undefined);
	}
	
	
	year.bind('change', select_day);
	month.bind('change', select_day);
	
	function select_day() {
		if (year.value() != 0 && month.value() != 0) {
			
			//清理之前的注入
			day.first().options.length = 1;
			
			//不确定的日
			var cur_day = 0;
			
			//注入日
			if (inArray(day31, parseInt(month.value()))) {
				cur_day = 31;
			} else if (inArray(day30, parseInt(month.value()))) {
				cur_day = 30;
			} else {
				if ((parseInt(year.value()) % 4 == 0 && parseInt(year.value()) % 100 != 0) || parseInt(year.value()) % 400 == 0) {
					cur_day = 29;
				} else {
					cur_day = 28;
				}
			}
			
			for (var i = 1; i <= cur_day; i ++) {
				day.first().add(new Option(i, i), undefined);
			}
			
		} else {
			//清理之前的注入
			day.first().options.length = 1;
		}
	}

	
});

</script>
</html>
